<template>
        <div class="login">
            <el-form
                    v-loading="loading"
                    element-loading-text="登陆中..."
                    :rules="rules"
                    ref="loginForm"
                    :model="loginForm"
                    class="loginContainer">
                <img src="https://gitee.com/KKP133/personnel_management_system/raw/master/com.png" width="330" height="100px">
                <h3 class="loginTitle">智能人事管理系统登陆</h3>
                <el-form-item prop="username">
                    <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <div style="display: flex;align-items: center">
                        <el-input
                                type="password"
                                v-model="loginForm.code"
                                auto-complete="off"
                                placeholder="点击图片更换验证码"
                                style="width: 220px;margin-right: 10px"
                                @keydown.enter.native="submitlogin"></el-input>
                        <img :src="verifyCodeUrl" alt="" @click="updateVerifyCode">
                    </div>
                </el-form-item>
                <el-button type="primary" style="width: 100%" @click="submitlogin">登陆</el-button>
            </el-form>
        </div>
</template>

<script>

    export default {
        name: "Login",
        data(){
            return{
                verifyCodeUrl:"/verifyCode?time="+new Date(),
                loading:false,
                loginForm:{
                    username:'admin',
                    password:'123',
                    code:''
                },
                checked:true,
                rules:{
                    username:[{required:true,message:'请输入用户名',trigger:'blur'}],
                    password:[{required:true,message:'请输入密码',trigger:'blur'}],
                    code:[{required:true,message:'请输入验证码',trigger:'blur'}]
                }
            }
        },
        methods:{
            gotoTest(){
              this.$router.push('/test');
            },
            updateVerifyCode() {
                this.verifyCodeUrl = "/verifyCode?time="+new Date();
            },
            submitlogin(){
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        this.loading = true;
                       this.postKeyValueRequest('/doLogin',this.loginForm).then(resp=>{
                           this.loading = false;
                           if(resp){
                               window.sessionStorage.setItem("user",JSON.stringify(resp.obj));
                               let path = this.$route.query.redirect;
                               // console.log(path);
                                this.$router.replace((path=='/'||path==undefined)?'/home':path);
                           }else{
                               this.updateVerifyCode();
                           }
                       });
                    } else {
                        this.$message.error('请完整填写所有信息!');
                        return false;
                    }
                });
            }
        }
    }
</script>

<style>
    .loginContainer {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 350px;
        padding: 15px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }

    .loginTitle {
        margin: 15px auto 20px auto;
        text-align: center;
        color: #505458;
    }
    .loginRemember{
        text-align: left;
        margin: 0px 0px 15px 0px;
    }
</style>
